<template>
    <view>
		<tabs :tabs="tabs" @tabsItemChange="hendleTabsItemChange">
			<view class="collect_main" v-if="index===0">
				<view class="collect_title">
					<text class="collect_tips active">全部</text>
					<text class="collect_tips">正在热卖</text>
					<text class="collect_tips">即将上线</text>
				</view>
				<view class="collect_content" v-if="collect.length">
				<navigator class="goods_item"
				v-for="item in collect"
				:key="item.goods_id"
				:url="`/pages/goods_detail/main?goods_id={{item.goods_id}}`"
				>
					<!-- 左侧图片容器 -->
					<view class="goods_img_wrap">
						<image mode="widthFix" :src="item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'"></image>
					</view>
					<!-- 右侧商品容器 -->
					<view class="goods_info_wrap">
						<view class="goods_name">{{item.goods_name}}</view>
						<view class="goods_price">￥{{item.goods_price}}</view>
					</view>
				</navigator>
				</view>
				<view v-else class="kong">还没有相关收藏哟~</view>
			</view>

			<view v-else class="noPu">暂无店铺可收藏~</view>
		</tabs>

		<like></like>

	</view>
</template>

<script>
import Tabs from "@/components/Tabs"
import like from "@/components/like"
import Like from '../../components/like.vue'
	export default {
		components:{
			Tabs,
			like
		},
		data(){
			return{
				tabs:[
				{
					id:0,
					value:"商品收藏",
					isActive:true
				},
				
				{
					id:1,  
					value:"店铺收藏",
					isActive:false
				},
				
				],
				
				collect:[],
				index:0
			}
    	},
		onShow(){
			this.collect =uni.getStorageSync('collect')||[];
		},
        methods:{
            //标题点击事件 从子组件传递过来
			hendleTabsItemChange(e){
				//获取索引
				this.index = e.index;
				//修改源数据
				let tabs = this.tabs;
				tabs.forEach((v,i)=>i===this.index?v.isActive=true:v.isActive=false);
				//赋值到data
				
				this.tabs = tabs;
				
			},
		}
		
	}
</script>

<style lang="scss">
	.collect_main{
		background-color: #f3f4f6;
		.collect_title{
			padding: 40rpx 0;
			.collect_tips{
				padding: 15rpx;
				border: 1rpx solid #ccc;
				margin-left: 25rpx;
				background-color: #fff;
			}
			.active{
				color: var(--themeColor);
				border-color: currentColor;
			}
		}
		.collect_content{
			.goods_item{
				background-color: #fff;
				display: flex;
				border-bottom: 1px solid #ccc;
				.goods_img_wrap{
					flex: 2;
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 70%;
					}
				}
				.goods_info_wrap{
					flex: 3;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.goods_name{
						display: -webkit-box;
						overflow: hidden;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
					.goods_price{
						color: #e64340;
						font-size: 32rpx;
					}
				}
			}
		}

		.kong{
				padding-bottom: 40rpx;
				margin-top: 40rpx;
				margin-left: 265rpx;
				color: #666;
			}

		
	}


	.noPu{
			margin-top: 100rpx;
			margin-left: 280rpx;
			color: #666;
		}
</style>